<template>
  <a-row class="table-toolbar" :gutter="10">
    <a-col v-for="(item, index) in toolbarConfig" :key="index">
      <a-button :type="item.type" @click="btnClick(item)">
        <span>{{ item.text }}</span>
        <template #icon>
          <component :is="iconMap[item.icon || 'add']" />
        </template>
      </a-button>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
  import { type ButtonProps } from 'ant-design-vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined, FileExcelOutlined } from '@ant-design/icons-vue';

  // 操作项配置类型
  export interface ToolbarItem {
    text: string; // 按钮文本
    type?: ButtonProps['type']; // 按钮类型（primary/danger等）
    icon?: keyof typeof iconMap;
    permission?: string; // 权限校验标识，目前未处理
    onClick?: () => void; // 调用父组件传入的 点击事件函数 （闭包）
  }

  interface Props {
    toolbarConfig: ToolbarItem[];
  }

  const iconMap = {
    add: PlusOutlined, // 添加
    edit: EditOutlined, // 编辑
    delete: DeleteOutlined, // 删除
    export: FileExcelOutlined, // 导出
  } as const;

  // 接收父组件配置
  defineProps<Props>();

  const btnClick = (item: ToolbarItem) => {
    console.log('permission:', item.permission);
    item.onClick?.();
  };
</script>

<style scoped>
  .table-toolbar {
    margin-bottom: 16px;
  }
</style>
